<script setup>
import TopButtonCenter from "@/components/Pengyq/TopButtonCenter.vue";
import { ref, onMounted } from "vue";
import { getFollowListAPI } from "@/server/api/ItemCommodity";
import { getFollowShopAPI } from "@/server/api/ShopFollow";
import { dataNitkTow } from "@/hook/dataNltk";
import { useUseStore } from "@/stores/user";
import { useRouter } from "vue-router";
const useStore = useUseStore();
import { ItemShopStore } from "@/stores/ItemAnShop";
import { itemFansSum } from "@/server/api/itemApi";
import { SelectFollowShopSum } from "@/server/api/shopApi";
import { useI18n } from "vue-i18n";
const { t } = useI18n();
const ItemShop = ItemShopStore();
const FollowList = ref([]);
// 粉丝总数
const itemFansNumArr = ref([]);
// 获取item粉丝数量
const getItemFansSum = async (itemId) => {
  const res = await itemFansSum(itemId);
  itemFansNumArr.value.push(res.data.data);
};
// 获取shop粉丝数量
const getShopFansSum = async (shopId) => {
  const res = await SelectFollowShopSum(shopId);
  itemFansNumArr.value.push(res.data.data);
};

// 获取item粉丝列表
const getFollowList = async (id, page, limit) => {
  const res = await getFollowListAPI(id, page, limit);
  let data = res.data.data;

  data.data.forEach((item) => {
    // let imgList = item.userImage.split(".");
    // item.userImage = useStore.ing + imgList[0] + "_90_100." + imgList[1];
    item.userImage = item.userImage
  });

  FollowList.value.push(...data.data);
  console.log(FollowList.value);

  if (data.data.length < 10) finished.value = true;
  loading.value = false;
};

// 获取shop关注列表
const getFollowShop = async (page, limit, id) => {
  const res = await getFollowShopAPI(page, limit, id);
  let data = res.data.data;

  // data.list.forEach((item) => {
  //   let imgList = item.userImage.split(".");
  //   item.userImage = useStore.ing + imgList[0] + "_90_100." + imgList[1];
  // });

  FollowList.value.push(...data.list);
  console.log(FollowList.value);

  if (data.list.length < 10) finished.value = true;
  loading.value = false;
};

const loading = ref(false);
const finished = ref(false);
const page = ref(1);
const onLoad = () => {
  // 异步更新数据
  console.log("1");
  if (ItemShop.IdtStatus == "item") {
    getFollowList(useStore.userId, ++page.value, 5);
  } else {
    getFollowShop(page.value++, 5, useStore.userId);
  }
};

// 路由跳转
const router = useRouter();
const toShopDetailFun = (id) => {
  router.push({
    path: "/ShopDetail",
    query: {
      id,
    },
  });
};

// 点击每一个li
const goPublisher = (itemId, userImage, itemName, score, shopId) => {
  if (ItemShop.IdtStatus == "item") {
    console.log(itemId);
    let publisherData = { userImage, itemName, score };
    router.push({
      path: "/publisher",
      query: {
        itemId,
        publisherData: JSON.stringify(publisherData),
      },
    });
  } else {
    console.log(shopId);
    router.push({
      path: "/shopDetail",
      query: {
        id: shopId,
      },
    });
  }
};

onMounted(() => {
  if (ItemShop.IdtStatus == "item") {
    getFollowList(useStore.userId, page.value, 10);
  } else {
    getFollowShop(page.value, 10, useStore.userId);
  }
});
</script>

<template>
  <TopButtonCenter :title="$t('me.buyersCenter.storeAttention')" />
  <div class="StoreAttention">
    <ul class="list">
      <li v-for="(i, index) in FollowList" :key="index"
        @click="goPublisher(i.shopId, i.userImage, i.itemName, i.score, i.shopId)">
        <header>
          <!-- 左侧头像 -->
          <div class="login">
            <img v-lazy="i.userImage" alt="User Image" />
          </div>
          <!-- 右侧内容 -->
          <div class="right_tex">
            <h5>{{ i.itemName || i.shopName }}</h5>
            <div class="totol">
              {{ i.follows }} Fans &nbsp;&nbsp;{{ i.score }}
              <van-rate v-model="i.score" :size="15" :count="5" color="#ffd21e" void-icon="star" void-color="#eee"
                allow-half readonly />
            </div>
          </div>
        </header>
      </li>
    </ul>
  </div>
</template>

<style lang="scss" scoped>
.StoreAttention {
  font-size: 14rem;
  padding: 60rem 10rem 0;

  .list {
    li {
      display: flex;
      /* 列表项为水平布局 */
      align-items: center;
      padding: 20rem 0;
      border-bottom: 1rem solid #d2d2d2;
      cursor: pointer;

      header {
        display: flex;
        /* 左右布局 */
        align-items: center;
        width: 100%;

        .login {
          width: 60rem;
          height: 60rem;
          flex-shrink: 0;
          /* 防止头像缩小 */
          border-radius: 50%;
          /* 圆形头像 */
          overflow: hidden;
          margin-right: 15rem;

          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            /* 保持图片比例 */
          }
        }

        .right_tex {
          display: flex;
          flex-direction: column;
          /* 内容垂直排列 */
          justify-content: center;
          flex-grow: 1;
          /* 右侧内容占据剩余空间 */

          h5 {
            font-size: 18rem;
            font-weight: 500;
            line-height: 1.4;
            /* 调整行高，适合换行 */
            word-break: break-word;
            /* 长单词换行 */
            margin-bottom: 10rem;
            color: #333;
          }

          .totol {
            color: #888;
            font-size: 14rem;
            display: flex;
            align-items: center;
            gap: 10rem;

            .van-rate {
              margin-left: 10rem;
            }
          }
        }
      }
    }
  }
}
</style>
